<!DOCTYPE html>
<html>
<head>
    <meta content="text/html; charset=UTF-8" http-equiv="content-type">
    <title>form</title>
</head>
<body>
<form action="">
    <input type="email">
    <input type="submit">
</form>
<details open="open">
    到底是什么东西啊
</details>
<mark>lkjlk</mark>
<progress value="123" max="1000"></progress>
<br>
<meter draggable="true" max="100" min="0" low="40" high="90" value="72" ></meter>
<div draggable="true" class="bei">可以拖放的</div>
<div draggable="true" class="tuo">可以拖放的</div>
<script type="text/javascript">
    var bei=document.querySelector('.bei');
    var tuo=document.querySelector('.tuo');
    var ico=new Image();
        ico.src='http://www.sucaicool.com/ico/xiaotubiao/xiaotubiao/isList.gif';
    tuo.addEventListener('dragstart',function(e){
        var dt=e.dataTransfer;
        dt.setDragImage(ico,-10,-10);
        dt.effectAllowed='copy';
        dt.setData('text/plain','你在干嘛呢')
    },false);
    tuo.addEventListener('drag',function(e){
        var dt=e.dataTransfer;
        dt.dropEffect='copy';
        tuo.innerHTML='拖动中'
    },false);
    tuo.addEventListener('dragend',function(e){
        tuo.innerHTML='拖放结束'
    },false);
    bei.addEventListener('drop',function(e){
        var dt=e.dataTransfer;
         alert(dt.getData('text/plain'));
        e.preventDefault();
        e.stopPropagation();
    },false);
    bei.addEventListener('dragenter',function(e){
         bei.style.background='#f0a';
    },false);
    bei.addEventListener('dragleave',function(e){
         bei.style.background='#fff';
    },false);
    bei.addEventListener('dragover',function(e){var dt=e.dataTransfer;
        dt.dropEffect='copy';
         e.preventDefault();
    },false);

</script>
</body>
</html>